<template>
  <div>
    <ee-button @click="changeColor">更换颜色</ee-button>
    <ee-button @click="percent += .2">+</ee-button>
    <ee-button @click="percent -= .2">-</ee-button>
    <ee-button @click="changePercent2(.7)">循环+</ee-button>
    <ee-button @click="changePercent2(-.7)">循环-</ee-button>
    <ee-button @click="loop()">{{ timer ? "停止增加" : "循环增加" }}</ee-button>
    <ee-button @click="percent = 0">置为0</ee-button>
    <ee-button @click="percent = 100">置为100</ee-button>
    <div class="fc" style="justify-content: space-evenly;">
      <ee-progress type="0" size="20px" v-model:value="percent" :color="colorc" @completed="complete" />
      <ee-progress type="0" v-model:value="percent" :color="gradient" />
      <ee-progress type="1" size="15" v-model:value="percent" :color="gradient" />

      <ee-progress type="2" size="3em" v-model:value="percent" :color="gradient"  />
      <ee-progress type="2" v-model:value="percent" style="--ee-progress-color: var(--primary0)"  />
      <ee-progress type="3" v-model:value="percent" style="--ee-progress-color: var(--success0)" />
      <ee-progress type="4" v-model:value="percent" style="--ee-progress-color: var(--warning0)"></ee-progress>
    </div>

    <div class="fc" style="justify-content: space-evenly;">
      <!-- <ee-circle></ee-circle> -->
    </div>
  </div>
</template>

<script type="text/javascript">
let colors = ["#0075ff", "red", "green", "blue", "yellow"]
export default {
  name: "test-ee-progress",
  data() {
    return {
      color: 0,
      timer: 0,
      percent: 0,
      gradient: { '0%': '#3fecff', '100%': '#6149f6', },
    }
  },
  // 计算属性，有依赖其它属性时，且其它属性没有发生变化，计算属性将不会重新计算而使用缓存
  computed: {
    bordercolor() {
      return colors[this.color];
    },
    colorc() {
      return colors[this.color];
      // return new Promise(r => {
      //   setTimeout(() => {
      //     r(colors[this.color]);
      //   }, 2000)
      // })
    }
  },
  methods: {
    changeColor() {
      this.color++;
      if (this.color == colors.length)
        this.color = 0;
    },
    changePercent2(value) {
      let v = this.percent;
      v += value;
      if (v > 1)
        v %= 1;
      if (v < 0)
        v = 1 + v;
      this.percent = v;
    },
    loop() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = 0;
        return;
      }
      this.timer = setInterval(() => {
        if (this.percent == 1) {
          this.percent = 0;
        }
        this.percent += .01;
      }, 50)
    },
    complete(i) {
      console.log("完成", i)
    },
    colorm(i) {
      console.log("colori", i, this)
      return colors[this.color];
      // return new Promise(r => {
      //   setTimeout(() => {
      //     r(colors[this.color]);
      //   }, 2000)
      // })
    }
  },
  mounted() {
  },
}
</script>

<style lang="scss" scoped></style>
